<template>
  <div class="finish-com">
    <div ref="maychar" style="width: 110px;height:110px;background-color: rgba(0, 0, 0, 0);">
    </div>

  </div>
</template>

<script>
export default {

  mounted() {
    this.getCharts();


  },
  methods: {

    getCharts() {
    
      const chartBox = this.echarts.init(this.$refs.maychar);
      const option = {
        graphic: [{ //环形图中间添加文字
          type: 'text', //通过不同top值可以设置上下显示
          left: '33%',
          top: '52%',
          style: {
            text: '点赞率',
            textAlign: 'center',
            fill: 'rgb(153, 153, 153)', //文字的颜色
            fontSize: 12,
            lineHeight: 16,
          }
        },
        { //环形图中间添加文字
          type: 'text', //通过不同top值可以设置上下显示
          left: '40%',
          top: '38%',
          style: {
            text: '50%',
            textAlign: 'center',
            fill: '#337c8e', //文字的颜色
            fontSize: 12,
            fontWeight: 700,
            lineHeight: 16,
          }
        }],

        // tooltip: {
        //   trigger: 'item'
        // },
        legend: {
          bottom: '1%',
          left: 'center'
        },
        series: [
          {
            cursor: "default",
            name: '点赞率',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            data: [
              { value: 1048 },
              { value: 735 },
            ],
          }
        ]
      };
      chartBox.setOption(option);
      // 根据页面大小自动响应图表大小
      window.addEventListener("resize", function () {
        chartBox.resize();
      chartBox.setOption(option);

      }, { passive: true });
    }
  }
}
</script>

<style lang="scss" scoped></style>